<template>
  <view class="lucky-draw" :style="scale">
    <image class="lucky-draw__bg" src="./images/background.png" mode="widthFix"></image>
    <image class="lucky-draw__lights" src="./images/light.png" mode="widthFix"></image>
    <view class="lucky-draw__objects" :style="rotateStyle">
      <image src="./images/objects-bg.png" class="lucky-draw__objects__bg"></image>
      <view
        class="lucky-draw__objects__object"
        v-for="(item, index) in data"
        :key="index"
        :style="{
          transform: `translate(-50%) rotate(${(360 / 8) * index}deg)`,
        }"
      >
        <view class="lucky-draw__objects__object__title">{{ item.name }}</view>
        <image class="lucky-draw__objects__object__icon" :src="$wanlshop.oss(item.image, 48, 48)"></image>
      </view>
    </view>
    <image class="lucky-draw__start" src="./images/start.png" @click="start(3)"></image>
  </view>
</template>

<script>
import api from '../../common/request/request';
import { mapGetters } from 'vuex';

export default {
  name: 'lucky-draw',
  data() {
    return {
      data: [],
      isStart: false,
      rotateAngle: 0, // 旋转角度
      cycle: 1, // 第几次抽奖
    };
  },
  computed: {
    rotateStyle() {
      return `
        -webkit-transition: transform ${this.duration}ms ${this.mode};
        transition: transform ${this.duration}ms ${this.mode};
        -webkit-transform: rotate(${this.rotateAngle}deg);
            transform: rotate(${this.rotateAngle}deg);`;
    },
    scale() {
      return `transform: scale(${this.size / 686})`;
    },
    ...mapGetters('common', ['integralName']),
  },
  props: {
    duration: {
      // 总旋转时间 ms级
      type: Number,
      default: 10000,
    },
    circle: {
      // 旋转圈数
      type: Number,
      default: 10,
    },
    mode: {
      // 由快到慢 惯性效果都省了
      type: String,
      default: 'cubic-bezier(0.2, 0, 0, 1)',
    },
    size: {
      type: Number,
      default: 686,
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  created() {
    api.get({
      url: '/wanlshop/lucky/getGitfList',
      success: res => {
        this.data = res;
      },
    });
  },
  methods: {
    async start(type = 2) {
      if (this.isStart) return;
      if (type == 3) {
        if (this.config.lucky_num == 0 && this.type == 0) {
          type = 2;
          const modal = await new Promise(resolve => {
            uni.showModal({
              content: `免费次数已用完，是否消耗${this.config.score_num}${this.integralName}抽奖`,
              success: res => {
                if (res.confirm) {
                  resolve(true);
                } else if (res.cancel) {
                  resolve(false);
                }
              },
            });
          });
          if (!modal) {
            return;
          }
        } else if (this.type == 1) {
          type = 4;
        } else {
          type = 1;
        }
      }
      uni.showLoading();
      this.isStart = true;
      this.$emit('loading', type == 4 ? 3 : type);
      api
        .post({
          url: '/wanlshop/lucky/startLucky',
          data: {
            form: type == 4 ? 3 : type,
          },
        })
        .then(res => {
          this.$emit('start');
          uni.hideLoading();
          this.rotateAngle =
            this.circle * 360 * this.cycle -
            (360 / 8 + (this.data.findIndex(item => item.id == res.id) - 1) * (360 / 8));
          this.cycle++;
          setTimeout(() => {
            this.isStart = false;
            this.$emit('finish', res);
          }, this.duration);
        })
        .catch(res => {
          console.log(res);
          this.$emit('error', res.data);
          this.isStart = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.lucky-draw {
  position: relative;
  width: fit-content;
  &__bg {
    width: 686rpx;
    display: block;
  }
  &__lights {
    position: absolute !important;
    width: 676rpx;
    left: 6rpx;
    top: 10rpx;
    display: block;
    animation: infinite 1s alternate lights steps(1, end);
  }
  &__objects {
    position: absolute;
    top: 60rpx;
    left: 63rpx;
    right: 63rpx;
    bottom: 78rpx;
    width: 560rpx;
    height: 560rpx;
    &__bg {
      position: absolute;
      width: 560rpx;
      height: 560rpx;
    }
    &__object {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      transform-origin: 50% 280rpx;
      &__title {
        margin-top: 34rpx;
        color: #ab892b;
        font-weight: 500;
        font-size: 24rpx;
      }
      &__icon {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 40rpx auto 0;
      }
    }
  }
  &__start {
    width: 164rpx;
    height: 178rpx;
    display: block;
    position: absolute;
    left: 260rpx;
    top: 250rpx;
  }
}
@keyframes lights {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>
